/**
 * 使用方法如下
 * 需要修改样式瘵houzhuo_css修改完成后，在替换原来的字符串就可以了
 * 2019年1月28日14:7:6
 * 330689855@qq.com
 * 13548192078
 * 
 * border显色为: #35baf6
 * 
 * 前景的颜色为：#deedf7
 * 
 * 如果风格有变，请整体替换
 * 
 * 
	 <div id="testGrid">   
	 </div> 
	$("#houzhuoGrid").houzhuoGrid({
		table_div:"testGrid",
		tableWidth:1000,  //必要
		tableHeight:400, //必要
		checkbox:false,    
		autoColWidth:false, //自动列宽
		page:true,  
		fontsize:16,
		type:"post",
		url:"${pageContext.request.contextPath}/demo.do", //必要
		param:{start:1,count:223,limit:20},  //必要
		before:function(opts){
		},
		success:function(opts){
		},
		columns:[ //必要
			{name:"table_id",showName:"主键id",width:"50",hidden:false},
			{name:"nubmer",showName:"数值",width:"100",hidden:false},
			{name:"state",showName:"状态",width:"50",hidden:false,format:function(divtd,data,row,j){ 
				 return ;
				 这里可以返回三路，一种String,一种是object
				 一种是function ,
				 如果是function,必须divtd,data,row,j四个参数，如下：
				 function a(divtd,data,row,j){
				 	这里主要是为了，这个表格里面增加的组件，增加事件完成基本操作
				 }
				 return a;
			}},
			{name:"name",showName:"名称",width:"100",hidden:false},
			{name:"value",showName:"内容",width:"300",hidden:true} 
		]
	});
	
	后台返回数据结构：
	    {
			start:1,
			limit:20,
			count:0,
			result:[
			
			]
		}, 
	
 *  
 */
var houzhuo_css ="<style id='houzhuo_css'>.houzhuo_table{border:0px solid #35baf6;border-collapse:collapse;table-layout:fixed;}.houzhuo_table td{border:1px solid #35baf6;word-break:break-all;word-wrap:break-all;}.houzhuo_table th{border-top:0px solid #35baf6;border-left:1px solid #35baf6;border-right:1px solid #35baf6;border-bottom:0px solid #35baf6;word-break:break-all;word-wrap:break-all;font-weight:normal;}.houzhuo_table tr:nth-child(even){background:#deedf7;}.houzhuo_divbody{border-top:0px solid #35baf6;border-left:1px solid #35baf6;border-right:1px solid #35baf6;border-bottom:1px solid #35baf6;overflow-x:auto;overflow-y:auto;}.houzhuo_divhead{border-top:1px solid #35baf6;border-left:1px solid #35baf6;border-right:1px solid #35baf6;border-bottom:1px solid #35baf6;background:#deedf7;overflow:hidden;}.houzhuo_divfoot{border-top:0px;border-left:1px solid #35baf6;border-right:1px solid #35baf6;border-bottom:1px solid #35baf6;}.tddiv{line-height:32px;padding-left:15px;position:relative;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;word-break:break-all;word-wrap:break-word;white-space:nowrap;text-overflow:ellipsis;}ul.pagination{display:inline-block;padding:0px;margin:0px;margin-left:15px;margin-bottom:5px;margin-top:8px;}ul.pagination li{display:inline;}ul.pagination li a{color:black;float:left;padding-left:4px;text-decoration:none;transition:background-color .3s;border:1px solid #35baf6;padding-right:4px;}ul.pagination li a.active{background-color:#deedf7;color:white;border:1px solid #35baf6;}ul.pagination li a:hover:not(.active){background-color:#35baf6;}</style>";
(function($) {   
	 function init(opts){ 
	    opts.before(opts);
		$("#"+opts.table_div).html("");
		if($("#houzhuo_css").length<=0){
			$("head").append(houzhuo_css);
		} 
		if(opts.table_div==""||opts.table_div==null){
			console.log("grid调用组件Id不能为空");
			return;
		} 
		opts = setCheckBoxAndnumber(opts);
		opts =  changeCooking_width(opts);
		opts =  changeCooking_hidden(opts); 
		opts =  changeCooking_sort(opts);
		opts =getAjaxData(opts);
		opts =  getTableWidthType(opts);  
		
		if(opts == false){
			console.log("表格设置有问题");
			return ;
		} 
		var headdiv = showHead(opts);
		
		var height =  $("html").css("font-size"); 
		var bodydiv = showBody(opts,opts.data); 
		var height =  $("html").css("font-size");
		 $("svg[name=svgck]").width(height).height(height); 
		//计算是否显示滚动条
		setScoll(opts,headdiv,bodydiv);
		$("#"+opts.table_div).find(".houzhuo_divbody").scroll(function(){ 
     		$(".houzhuo_divhead").scrollLeft($(this).scrollLeft());
     	});
		$(".tddiv").css({"line-height":(opts.fontsize*2.5)+"px"});
		$(".tddiv").css({"line-height":(opts.fontsize*2.5)+"px"});
		changeck(opts);
		if(opts.page == true){ 
			pagediv.width(opts.tableWidth);
			$("#"+opts.table_div).append(pagediv);
			pageLister(pagediv,opts);
		}   
		 var height = opts.fontsize;
		 opts.success(opts);
		 last(opts);
	 }
	 function changTable(opts){
		opts =getAjaxData(opts);
		var bodydiv =showBody(opts,opts.data);  
		last(opts);
	 	setScoll(opts,null,bodydiv);
		$("#"+opts.table_div).find(".houzhuo_divbody").scroll(function(){ 
     		$(".houzhuo_divhead").scrollLeft($(this).scrollLeft());
     	});
		$(".tddiv").css({"line-height":(opts.fontsize*2.5)+"px"});
		$(".tddiv").css({"line-height":(opts.fontsize*2.5)+"px"});
		changeck(opts);
	 }
	//顺序问题
		function changeCooking_sort(opts){ 
			 var columns =	getCookie(opts.table_div+"cooking_sort"); 
			 if( columns == "" || columns == "[]"){ 
				 return opts;
			 } 
			 var sortList = eval(columns);
			 for(var i=0;i<sortList.length;i++){
				 for(var j=0;j<opts.columns.length;j++){
					   if(sortList[i].name == opts.columns[j].name){
						   opts.columns[j].name = sortList[i].name;
						   opts.columns[j].sort = i+1;
					   }
				   }  
			 }
			 opts.columns.sort(sortListby("sort"));
			 return opts;
		}
		//排序
		function sortListby(field){
				 return function(a,b) {
			        return a[field] - b[field];
			    }
		}
	//最后计算
	function  last(opts){ 
		$("#"+opts.table_div).css({"font-size":opts.fontsize});  
		var height = opts.fontsize*2;
		$("#"+opts.table_div).find(".houzhuo_divfoot").find("a").parent().css({height:height,"line-height":height+"px"}); 
		$("#"+opts.table_div).find(".houzhuo_divfoot").find("a").css({height:height}); 
		$("#"+opts.table_div).find(".houzhuo_divfoot").find("select").css({"height":height-2,"width":height*2-5,"display":"block"}); 
		$("#"+opts.table_div).find(".houzhuo_divfoot").find("input[type=text]").css({"height":height-10,"width":height*2-5,"display":"block"});
		$("svg[name=footsvg]").width(height-6).height(height-6);
		$("svg[name=svgck]").width(opts.fontsize).height(opts.fontsize);
	}
	//设置行的是否折行
	function setTdWordbreak(flag){ 
		if(flag == 0){ 
			$(".houzhuo_table  .tddiv").css({"text-overflow":"inherit" ,"white-space": "nowrap"});
		}else{ 
			$(".houzhuo_table  .tddiv").css({"text-overflow":"ellipsis" ,"white-space": "pre-wrap"});
		} 
	}
	//监听分页的问题
	 function pageLister(pagediv,opts){ 
		    var  listLi = pagediv.find("li");  
			var pageSize = getCookie(opts.table_div+"cooking_pageSize"); 
			var listOption  = $("#"+opts.table_div).find(".houzhuo_divfoot").find("select").children(); 
			for(var i=0;i<listOption.length;i++){ 
				if($(listOption[i]).text() == pageSize){
					$(listOption[i]).attr("selected","selected");
				} 
			}  
			$(listLi[0]).click({name:opts},function(event){
				$(listLi[2]).children().children().val(1); 
				var opts =event.data.name;
				opts.param.start = 1; 
				changTable(opts); 
			});
			$(listLi[1]).click({name:opts},function(event){ 
				var  value  = $(listLi[2]).children().children().val(); 
				value++; 
				if(value >=event.data.name.data.count){
					value = event.data.name.data.count;
				}
				$(listLi[2]).children().children().val(value); 
				var opts =event.data.name;
				opts.param.start = value;
				changTable(opts); 
			}); 
			//文本框点击事件
			$(listLi[2]).children().children().bind("keyup",{name:opts},function(event){
				if(event.keyCode == 13){
					var  value  = $(listLi[2]).children().children().val();  
					$(listLi[2]).children().children().val(value); 
					var opts =event.data.name;
					opts.param.start = value;
					changTable(opts); 
				} 
			});
			$(listLi[3]).click({name:opts},function(event){
				var  value  = $(listLi[2]).children().children().val(); 
				value--; 
				if(value <=0){
					value =1;
				}
				$(listLi[2]).children().children().val(value); 
				var opts =event.data.name;
				opts.param.start =value;
				changTable(opts); 
			}); 
			$(listLi[4]).click({name:opts},function(event){   
				$(listLi[2]).children().children().val(event.data.name.data.count); 
				var opts =event.data.name;
				opts.param.start = event.data.name.data.count;
				changTable(opts); 
			});
			//选中分页事件
			$(listLi[5]).children().children().change({name:opts},function(event){
				var pageSize = $(this).find("option:selected").text();
				var opts =event.data.name;
				opts.pageSize =  pageSize; 
				setCookie(opts.table_div+"cooking_pageSize",pageSize,365);
				init(opts);
			});
			$(listLi[6]).children().text("共"+opts.data.count+"页");

			//div内容展开
			$(listLi[7]).children().click({name:opts},function(event){ 
				var flag = changColor(this,event.data.name); 
				setTdWordbreak(flag);
			});
			//设置宽度
			$(listLi[8]).children().click({name:opts},function(event){
				var flag = changColor(this,event.data.name);
				if(flag == 0){
					changTable(opts);
					return;
				}
				var columns =  event.data.name.columns;
				
				$("#"+opts.table_div).find(".houzhuo_divbody").html(""); 
				$("#"+opts.table_div).find(".houzhuo_divbody").append("<div style='margin-top:10px;'>设置表格列宽度</div>");
				$("#"+opts.table_div).find(".houzhuo_divbody").append("<hr>");
				var input  = $('<div id="setTableWidth_houzhuodiv"></div>');
				for(var i=0;i<columns.length;i++){ 
					if(columns[i].name == "checkbox_"+opts.table_div){
						continue;
					}
					input.append(columns[i].showName+'：<input type="text" style="width:50px;" name="'+columns[i].name+'" value="'+columns[i].width+'">');
				} 
				$("#"+opts.table_div).find(".houzhuo_divbody").append(input);
				var btn = $("<input type='button' value='保存'>");
				var btn1 = $("<input type='button' value='关闭'>");
				$("#"+opts.table_div).find(".houzhuo_divbody").append("<hr>");
				$("#"+opts.table_div).find(".houzhuo_divbody").append(btn);
				$("#"+opts.table_div).find(".houzhuo_divbody").append(btn1);
				$("#"+opts.table_div).find(".houzhuo_divbody").append("设置表格的宽度后，表格自适应将不在有用。如果需要还原设置，可以清空浏览器缓存！");
				btn.click({name:opts},function(event){ 
					var opts = event.data.name;
					var  allf = [];
					for(var i=0;i<opts.columns.length;i++){
						var row  = opts.columns[i];
						if(row.name =="checkbox_"+opts.table_div){
							continue;
						}
						var obj = {};
						var input = $("#setTableWidth_houzhuodiv").find("[name="+row.name+"]");
						if(input.length>0){
							obj.width = $(input).val();
							obj.name = row.name;
							 opts.columns[i].width =obj.width; 
						} 
						allf.push(obj);
					}
					setCookie(opts.table_div+"cooking_width",obj2str(allf),365);
					getTableWidthType(opts);
					init(opts);
				});
				btn1.click({name:event.data.name},function(event){
					//changTable(event.data.name);
					init(opts);
				});
			});
			//td显示顺序
			$(listLi[9]).children().click({name:opts},function(event){ 
				var flag = changColor(this,event.data.name);
				if(flag == 0){
					changTable(opts);
					return;
				}
				var columns =  event.data.name.columns;
				$("#"+opts.table_div).find(".houzhuo_divbody").html(""); 
				$("#"+opts.table_div).find(".houzhuo_divbody").append("<div style='margin-top:10px;'>拖动设置表格列显示顺序</div>");
				$("#"+opts.table_div).find(".houzhuo_divbody").append("<hr>");
				var input  = $('<div id="setTableWidth_houzhuodiv"></div>');
				var ul = $("<ul style='list-style-type: decimal;'/>");
					ul.attr("id","sortUl_"+event.data.name.table_div);
				for(var i=0;i<columns.length;i++){ 
					if(columns[i].name == "checkbox_"+event.data.name.table_div){
						continue;
					}
					ul.append('<li name="'+columns[i].name+'" style=" background: #35baf6;margin: 4px; width:100px;height:40px;line-height:'+(opts.fontsize*2.5)+'px;">'+columns[i].showName+'</li>'); 
				}  
				$("#"+opts.table_div).find(".houzhuo_divbody").append(ul); 
				var btn = $("<input type='button' value='保存'>");
				var btn1 = $("<input type='button' value='关闭'>");
				$("#"+opts.table_div).find(".houzhuo_divbody").append("<hr>");
				$("#"+opts.table_div).find(".houzhuo_divbody").append(btn);
				$("#"+opts.table_div).find(".houzhuo_divbody").append(btn1);
				$("#sortUl_"+event.data.name.table_div).sortable({
				         cursor: "move",
				         items :"li",                        //只是li可以拖动
				         opacity: 0.6,                       //拖动时，透明度为0.6
				         revert: true,                       //释放时，增加动画
				         update : function(event, ui){
				        	 
				         }
				 });
				//丛轩table
				btn1.click({name:event.data.name},function(event){
					init(event.data.name);
				});
				//保存顺序
				btn.click({name:event.data.name},function(event){
					var opts  = event.data.name; 
					var liList = $("#sortUl_"+opts.table_div).children();
					var sortList = [];
					for(var i = 0;i<liList.length;i++){
						var name  = $(liList[i]).attr("name");
						var obj = {};
						obj.order = i+1;
						obj.name = name;
						sortList.push(obj);
					} 
					setCookie(opts.table_div+"cooking_sort",obj2str(sortList),365);
					opts = changeCooking_sort(opts);
					getTableWidthType(opts);
					init(opts); 
				});
			});
			//td隐藏
			$(listLi[10]).children().click({name:opts},function(event){
				var flag = changColor(this,event.data.name);
				if(flag == 0){
					changTable(opts);
					return;
				}
				var columns =  event.data.name.columns;
				$("#"+opts.table_div).find(".houzhuo_divbody").html(""); 
				$("#"+opts.table_div).find(".houzhuo_divbody").append("<div style='margin-top:10px;'>设置表格列显示</div>");
				$("#"+opts.table_div).find(".houzhuo_divbody").append("<hr>");
				var input  = $('<div id="setTableWidth_houzhuodiv"></div>');
				for(var i=0;i<columns.length;i++){ 
					if(columns[i].name == "checkbox_"+opts.table_div){
						continue;
					}
					if(columns[i].hidden == true){
						input.append(columns[i].showName+'：<input type="checkbox" name="'+columns[i].name+'">');
					}else{
						input.append(columns[i].showName+'：<input type="checkbox" checked=checked name="'+columns[i].name+'">');
					}
				} 
				$("#"+opts.table_div).find(".houzhuo_divbody").append(input);
				var btn = $("<input type='button' value='保存'>");
				var btn1 = $("<input type='button' value='关闭'>");
				$("#"+opts.table_div).find(".houzhuo_divbody").append("<hr>");
				$("#"+opts.table_div).find(".houzhuo_divbody").append(btn);
				$("#"+opts.table_div).find(".houzhuo_divbody").append(btn1);
				btn.click({name:opts},function(event){ 
					var opts = event.data.name;
					var  allf = [];
					for(var i=0;i<opts.columns.length;i++){
						var row  = opts.columns[i];
						if(row.name =="checkbox_"+opts.table_div){
							continue;
						}
						var obj = {};
						var input = $("#setTableWidth_houzhuodiv").find("[name="+row.name+"]");
						if(input.length>0){
							var flag = $(input).is(":checked");
							if(flag == true){
								obj.hidden = false;
							}else{
								obj.hidden = true;
							} 
							obj.name = row.name;
							opts.columns[i].hidden =obj.hidden; 
						} 
						allf.push(obj);
					}
					setCookie(opts.table_div+"cooking_hidden",obj2str(allf),365);
					init(opts);
				});
				btn1.click({name:event.data.name},function(event){
					init(event.data.name);
				}); 
			});   
	 }
	//改变Table的foot下功能图标的颜色
	function changColor(self,opts){ 
		var color =$(self).children().css("color");
		$("svg[name=footsvg]").css({"color":"rgb(0, 0, 0)"});
		if(color == "rgb(0, 0, 0)"){
			$(self).children().css({"color":"red"}); 
			return 1;
		}else{
			$(self).children().css({"color":"rgb(0, 0, 0)"}); 
			return 0;
		}
	}
	//chebox的换选事件
		function ckfHead(self,opts){ 
			 var tddiv=  $(self).parent();
			 var ck =tddiv.attr("ck"); 
			 var ckhead= tddiv.attr("ckhead");  
			 if(ck =="1"){
				 if(ckhead == "1"){
					 $("td[name=checkbox_"+opts.table_div+"]").children().children().html(checkboxf);
					 $("td[name=checkbox_"+opts.table_div+"]").children().attr("ck","0");
				 } 
				 tddiv.attr("ck","0");
				 tddiv.html(checkboxf);   
			 }else{
				 if(ckhead == "1"){
					 $("td[name=checkbox_"+opts.table_div+"]").children().children().html(checkboxt);
					 $("td[name=checkbox_"+opts.table_div+"]").children().attr("ck","1");
				 } 
				 tddiv.attr("ck","1");
				 tddiv.html(checkboxt); 
			 }
			 var height = opts.fontsize;
			 $("svg[name=svgck]").width(height).height(height); 
			 tddiv.children().click({name:opts},function(event){
				 ckfHead(this,event.data.name);
			 });
		} 
	//调用ck
		function changeck(opts){
			//ck事件
			$("th[name=checkbox_"+opts.table_div+"]").children().children().click({name:opts},function(event){
				ckfHead(this,event.data.name);
			});
			$("td[name=checkbox_"+opts.table_div+"]").children().children().click({name:opts},function(event){
				ckfHead(this,event.data.name);
			}); 
			$("svg[name=svgck]").width(opts.fontsize).height(opts.fontsize);
		}
	//计算滚动条
		function getScrollWidth() {
		  var noScroll, scroll, oDiv = document.createElement("DIV");
		  oDiv.style.cssText = "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;";
		  noScroll = document.body.appendChild(oDiv).clientWidth;
		  oDiv.style.overflowY = "scroll";
		  scroll = oDiv.clientWidth;
		  document.body.removeChild(oDiv);
		  return noScroll-scroll;
		}
	 //根据页面的基本信息查询数据
	 function getAjaxData(opts){  
			if(opts.pageSize == 0){
				if(opts.page == true){
					 var pageSize = getCookie(opts.table_div+"cooking_pageSize"); 
					 if(pageSize>0){
						 opts.pageSize  = pageSize;
					 }else{
						 if($("#"+opts.table_div).find(".houzhuo_divfoot").find("select").length>0){
							 opts.pageSize =  $("#"+opts.table_div).find(".houzhuo_divfoot").find("select").find("option:selected").text();
						 }else{
							 opts.pageSize =  20;
						 } 
					 } 
				}else{
					opts.pageSize = 20;
				}
			}
			opts.param.limit = opts.pageSize; 
			$.ajax({
			   type: opts.type,
			   url: opts.url,
			   async:false,
			   data: opts.param,
			   dataType:"json",
			   //contentType:"text/html;charset=utf-8",
			   success: function(msg){ 
			       opts.data = msg;
			       
			   },error:function(a,b,c){
				   opts.data = {start:1,limit:0,count:0,result:[]};
			   }
			}); 
			return opts;
		}
	//调用显示数据的方法
		function showBody(opts,data){
			 var tbody = $("<tr/>"); 
			 var tbodyDiv = $("#"+opts.table_div).find(".houzhuo_divbody");
			if(tbodyDiv.length>0){
				tbodyDiv.html("");
			}else{
				tbodyDiv=$("<div class='houzhuo_divbody'></div>"); ; 
				$("#"+opts.table_div).append(tbodyDiv); 
			} 
			if(data.result.length==0){ 
				 tbodyDiv.append("无数据");
				 tbodyDiv.css({"width":opts.tableWidth,height:opts.tableHeight,"text-align":"center"});
				 $("#"+opts.table_div).append(tbodyDiv); 
				return tbodyDiv;
			}  
			//正式创建Table
			var tbody = $("<tbody/>"); 
			var borderOne  = getFristTdHidden(opts);
			var borderLast = getLastTdHidden(opts);   
			for(var j=0;j<data.result.length;j++){
				var row = data.result[j];
				var tbodytr = $("<tr/>"); 
				for(var i=0;i<opts.columns.length;i++){
					 var tdc = opts.columns[i]; 
					 if(tdc.name =="checkbox_"+opts.table_div){
						 var divtd = $("<div class='tddiv' style='margin:0 auto;text-align:center;'></div>");
						 var td = $("<td/>"); 
						 
						 divtd.append(tdc.showName);
						 td.attr("name","checkbox_"+opts.table_div);
						 td.append(divtd);
						 divtd.data("row",row);
						 tbodytr.append(td);
						 if(tdc.name  == borderOne){
							 td.css({"border-left":"0px solid #35baf6"});
						 } 
						 if(j==0){
							 td.css({"border-top":"0px solid #35baf6"});
						 }
						 td.css({"width":tdc.realWidth}); 
						 continue;
					 }
					 var divtd = $("<div class='tddiv'></div>");
					
					 var td = $("<td/>"); 
					 if(typeof(row[tdc.name])!="undefined"){ 
						 td.attr("name",tdc.name);
						 divtd.text(row[tdc.name]);
					 }else{
						 td.attr("name",tdc.name);
						 divtd.text("");
						
					 }
					 divtd.data("row",row); 
					 if(typeof(tdc.format)=="function"){ 
						 var fk = tdc.format(divtd,data,row,j); 
						 if(typeof(fk)=="object"){
							 divtd.append($(fk));
						 }else if(typeof(fk)=="function"){
							 fk(divtd,data,row,j);
						 }else{
							 divtd.html(fk);
						 } 
					 }
					 td.append(divtd);  
					 td.css({"width":tdc.realWidth});
					 td.attr("title",row[tdc.name]);
					 td.children().css({"width":tdc.realWidth-15});
					 if(tdc.name  == borderLast){
						 if(opts.tableWidth < opts.tableRealWidth){
							 td.css({"border-right":"0px solid #35baf6"});
						 }else{
							 td.css({"border-right":"1px solid #35baf6"});
						 }
						 td.children().css({"width":tdc.realWidth-30});
					 } 
					 if(j==0){
						 td.css({"border-top":"0px solid #35baf6"});
					 } 
					 if(tdc.name == borderOne){
						 td.css({"border-left":"0px solid #35baf6"});
					 } 
					 if(tdc.hidden && tdc.hidden == true){
						 td.css({"display":"none"});
					 }  
					 tbodytr.append(td);   
				 } 
				tbody.append(tbodytr);
			}  
			 var tbodyTable =$("<table id='houzhuo_table_body_"+opts.table_div+"' class='houzhuo_table'/>");
			 tbodyTable.append(tbody); 
			 tbodyDiv.append(tbodyTable);    
			 tbodyTable.css({"width":opts.tableRealWidth});   
			 tbodyDiv.css({"width":opts.tableWidth,height:opts.tableHeight});
			 return tbodyDiv;
		}
		//计算关于滚动条的
		function setScoll(opts,headdiv,bodydiv){ 
			 
			var tableBodyHeight = $(bodydiv).height();
			var tableBodyTableHeight = $(bodydiv).children().height();
			var colNameLasthidden = getLastTdHidden(opts); 
			var soCwidth = getScrollWidth()+4; 
			if(tableBodyTableHeight > tableBodyHeight){
				var allchangeTd = $(bodydiv).find("td[name="+colNameLasthidden+"]");
				var width = allchangeTd.width(); 
				allchangeTd.width(width-soCwidth-8);
				allchangeTd.css({"border-right":"1px solid #35baf6"}); 
				if(headdiv){
					var allchangeTh = $(headdiv).find("th[name="+colNameLasthidden+"]");
					allchangeTh.width(width-soCwidth-8);
					allchangeTh.css({"border-right":"1px solid #35baf6"});
				} 
				$(bodydiv).find("tr").last().children().css({"border-bottom":"0px solid #35baf6"});  
			} 
		}
	//加载显示头
		function showHead(opts){
			 var thead = $("<tr/>");
			 var theadDiv = $("#"+opts.table_div).find(".houzhuo_divhead"); 
			 if(theadDiv.length>0){
				 theadDiv.html("");
				}else{
					theadDiv=$("<div class='houzhuo_divhead'></div>"); 
					$("#"+opts.table_div).append(theadDiv); 
				} 
			 var borderOne  = getFristTdHidden(opts);
			 var borderLast = getLastTdHidden(opts);  
			 if(opts == false){
				 console.log("表格设置表头不对");
				 return;
			 }    
			 for(var i=0;i<opts.columns.length;i++){
				 var thc = opts.columns[i];
				 var th = $("<th/>");
				 var divth = $("<div class='tddiv' style='text-align:center;'></div>");
				// divth.append(thc.showName);
				 if(thc.name == "checkbox_"+opts.table_div){
					 divth =$("<div class='tddiv' ck='0' ckhead='1' style='text-align:center;'></div>");
					 divth.css({"margin":"0 auto"});
					 divth.append(thc.showName); 
				 }else{ 
					 divth.css({"margin":"0 auto","height":opts.fontsize*2});
					 divth.append(head); 
					 $(divth.children()[0]).text(thc.showName); 
					 $(divth.children()[0]).css({"margin-left":"8px","font-size":opts.fontsize,"line-height":(opts.fontsize*2)+"px","height":opts.fontsize*2});
					 $(divth.children()[1]).css({"margin-top":opts.fontsize*0.3});
					 $(divth.children()[1]).children().css({"width":opts.fontsize*0.7,"height":opts.fontsize*0.7});
					 $(divth.children()[1]).children().attr("byName",thc.name);
					 $($(divth.children()[1]).children()[0]).attr("fid",thc.name+"01");
					 $($(divth.children()[1]).children()[1]).attr("fid",thc.name+"02");
					 $(divth.children()[1]).children().click({name:opts},function(event){
						 $(".houzhuo_divhead").find("svg").css({"color":"black"});
						 $(this).css({"color":"red"});
						 var byL = $(this).attr("byl");
						 var opts = event.data.name;
						 var fid=$(this).attr("fid");
						 opts.param.orderby = $(this).attr("byName");
						 opts.param.desc =byL; 
						 opts = getAjaxData(opts); 
						 changTable(opts);
						 $(".houzhuo_divhead").find("svg[fid="+fid+"]").css({"color":"red"});
					 });
				 } 
				 th.append(divth);
				 th.attr("name",thc.name); 
				 th.css({"width":thc.realWidth}); 
				 thead.append(th);
				 if(thc.name == borderOne){ 
					 th.css({"border-left":"0px solid #35baf6"});
				 }
				 if(thc.name  == borderLast){
					 if(opts.tableWidth < opts.tableRealWidth){
						 th.css({"border-right":"0px solid #35baf6"});
					 }else{
						 th.css({"border-right":"1px solid #35baf6"});
					 } 
				 } 
				 if(thc.hidden && thc.hidden == true){
					 th.css({"display":"none"});
				 } 
			 } 
			 var theadTable =$("<table id='houzhuo_table_head_"+opts.table_div+"' class='houzhuo_table'/>");
			// console.log(thead.html());
			 theadTable.append(thead);  
			 var divw = $('<div></div>'); 
			 divw.width(opts.tableRealWidth+100);
			 divw.append(theadTable);  
			 theadDiv.append(divw);  
			 $("#"+opts.table_div).prepend(theadDiv);
			 theadTable.css({"width":opts.tableRealWidth+"px"});   
			 theadDiv.css({"width":opts.tableWidth+"px"});
			//调用重写
			opts.reHead(opts,theadDiv);
			return theadDiv;
		}
	 
	//得到Table宽度
		function getTableWidthType(opts){   
			var tableWidth = 0;
		    console.log(opts.tableWidth);
			if(opts.autoColWidth == true){ 
				var hic = 0;
				for(var i=0;i<opts.columns.length;i++){
					if(opts.columns[i].hidden == true){
						hic++;
					} 
				} 
				var flag = 0;
				for(var i=0;i<opts.columns.length;i++){
					if(opts.columns[i].name == "checkbox_"+opts.table_div){
						opts.columns[i].realWidth = 40;
				    	opts.columns[i].width=40; 
				    	tableWidth+=40;
					}else{
						 if(opts.checkbox == true){
							 opts.columns[i].realWidth = (opts.tableWidth-40-30)/(opts.columns.length-1-hic);
						     opts.columns[i].width= (opts.tableWidth-40-30)/(opts.columns.length-1-hic);  
						 }else{
							 opts.columns[i].realWidth = (opts.tableWidth-30)/(opts.columns.length-hic);
						     opts.columns[i].width= (opts.tableWidth-30)/(opts.columns.length-hic);
						 } 
						 
					} 
					
				}  
				opts.tableRealWidth = opts.tableWidth-30; 
				console.log(opts.tableRealWidth);
				return opts;
			} 
			for(var i=0;i<opts.columns.length;i++){
				if(opts.columns[i].hidden == "undefined" || opts.columns[i].hidden == false){ 
					    if(typeof(opts.columns[i].width) == "undefined" || opts.columns[i].width =="" || opts.columns[i].width <=0){ 
					    	opts.columns[i].realWidth = 200;
					    	opts.columns[i].width=200; 
					    	
					    }else{
					    	opts.columns[i].realWidth = opts.columns[i].width;
					    }
					    tableWidth+=parseInt(opts.columns[i].realWidth);
				 }
				 
			}  
			 
			opts.tableRealWidth = tableWidth;
		return opts;
		}
	 // 对象转字符串
		function obj2str(o){
		    var r = [];
		    if(typeof o =="string") return "\""+o.replace(/([\'\"\\])/g,"\\$1").replace(/(\n)/g,"\\n").replace(/(\r)/g,"\\r").replace(/(\t)/g,"\\t")+"\"";
		    if(typeof o == "object"){
		        if(!o.sort){
		            for(var i in o)
		                r.push(i+":"+obj2str(o[i]));
		            if(!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)){
		                r.push("toString:"+o.toString.toString());
		            }
		            r="{"+r.join()+"}";
		        }else{
		            for(var i =0;i<o.length;i++)
		                r.push(obj2str(o[i]));
		            r="["+r.join()+"]";
		        }
		        return r;
		    }
		    return o.toString();
		}
	//和cook的内容进行对比 对比显示
		function changeCooking_hidden(opts){ 
		   var columns =	getCookie(opts.table_div+"cooking_hidden");  
		   if(columns =="" || columns.length <=0){
			   return opts;
		   }else{
			   var col = eval(columns);
			   for(var i=0;i<col.length;i++){
				   for(var j=0;j<opts.columns.length;j++){
					   if(col[i].name == opts.columns[j].name){
						   opts.columns[j].hidden = col[i].hidden;
					   }
				   } 
			   } 
		   } 
		   return opts;
		}
	//和cook的内容进行对比 对比 宽度
		function changeCooking_width(opts){ 
		   var columns =	getCookie(opts.table_div+"cooking_width");  
		   if(columns =="" || columns.length <=0){
			   return opts;
		   }else{
			   var col = eval(columns);
			   for(var i=0;i<col.length;i++){
				   for(var j=0;j<opts.columns.length;j++){
					   if(col[i].name == opts.columns[j].name){
						   opts.columns[j].width = col[i].width;
					   }
				   } 
			   } 
		   } 
		   return opts;
		}
	//设置checkbox
	function setCheckBoxAndnumber(opts){ 
		var flg = 0; 
		for (var i = 0; i < opts.columns.length; i++) {
			if(opts.columns[0].name == "checkbox_"+opts.table_div){
				return opts;
			}
		}  
		if(opts.checkbox == true){
			var  ck = {name:"checkbox_"+opts.table_div,showName:checkboxf,width:"40",hidden:false};
			opts.columns.splice(0,0,ck); 
		} 
		return opts;
	}; 
	//getCook
	function getCookie(c_name)
	{
		if (document.cookie.length>0)
		  {
		  c_start=document.cookie.indexOf(c_name + "=")
		  if (c_start!=-1)
		    { 
		    c_start=c_start + c_name.length+1 
		    c_end=document.cookie.indexOf(";",c_start)
		    if (c_end==-1) c_end=document.cookie.length
		    return unescape(document.cookie.substring(c_start,c_end))
		    } 
		  }  
		return "";
	}  
	//设置最后一个显示的Td,th的右边框为隐藏的列名
	function getLastTdHidden(opts){
		var ColName = "";
		for(var i=0;i<opts.columns.length;i++){
			var col =opts.columns[i];
			if(col.hidden ==false || typeof(col.hidden) =="undefined"  ){
				ColName = col.name;
			}
		}
		return ColName;
	}
	//设置第一一个显示的Td,th的左边框为隐藏的列名
	function getFristTdHidden(opts){
		var ColName = "";
		for(var i=0;i<opts.columns.length;i++){
			var col =opts.columns[i];
			if(col.hidden ==false || typeof(col.hidden) =="undefined" ){
				ColName = col.name;
				return ColName;
			}
		} 
	}
	//得到一行 
	function getRows(opts){ 
		var list = $('td[name=checkbox_'+opts.table_div+']').children("[ck=1]");
		var array = [];
		 for(var i=0;i<list.length;i++){ 
			 var div = list[i]; 
			 array.push($(div).data("row"));
		 } 
		 return  array;
	}
	//设置cook
	function setCookie(c_name,value,expiredays)
	{
		var exdate=new Date()
		exdate.setDate(exdate.getDate()+expiredays)
		document.cookie=c_name+ "=" +escape(value)+
		((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
		} 
		function checkCookie()
		{
		username=getCookie('username')
		if (username!=null && username!="")
		  {alert('Welcome again '+username+'!')}
		else 
		  {
		  username=prompt('Please enter your name:',"")
		  if (username!=null && username!="")
		    {
		    setCookie('username',username,365)
		    }
		  }
	}
	// 组件初始化
	$.fn.houzhuoGrid = function(method, options) {
		if (typeof (method) == "string") {
			return $.fn.houzhuoGrid.methods[method](options);
		} else {
			var opts = $.extend({}, $.fn.houzhuoGrid.defaults, method);
			init(opts);
		}
	};  
	// 组件默认参数
	$.fn.houzhuoGrid.defaults = { 
		tableHeight:"auto",
		tableWidth:"auto", 
		table_div:"",
		checkbox:true,
		autoColWidth:false, //自动列宽
		table_url:"", 
		pageSize:0,
		type:"post",
		page:true,
		fontsize:14,
		parameter:{
			start:1,
			limit:20,
			count:0,
		},
		before:function(opts){
			//调用成功数据之前
		},
		success:function(opts) {
			// alert("d");
		},
		reHead:function(opts,theadDiv){
			//重写头，继续写头的方法
			 
		}
	};
	// 组件方法注册
	$.fn.houzhuoGrid.methods = {
		getRows : function(opts) {
			 return getRows(opts);
		} 
	};
	  
	var icon1 ='<svg   name="footsvg"   style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1022"><path d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" p-id="1023"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-40 728H184V184h656v656z" p-id="1024"></path></svg>';
	var icon3 ='<svg   name="footsvg"   style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2465"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 208H676V232h212v136z m0 224H676V432h212v160zM412 432h200v160H412V432z m200-64H412V232h200v136z m-476 64h212v160H136V432z m0-200h212v136H136V232z m0 424h212v136H136V656z m276 0h200v136H412V656z m476 136H676V656h212v136z" p-id="2466"></path></svg>';
	var icon2 ='<svg   name="footsvg"   style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3873"><path d="M894 462c30.9 0 43.8-39.7 18.7-58L530.8 126.2a31.81 31.81 0 0 0-37.6 0L111.3 404c-25.1 18.2-12.2 58 18.8 58H192v374h-72c-4.4 0-8 3.6-8 8v52c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-52c0-4.4-3.6-8-8-8h-72V462h62zM512 196.7l271.1 197.2H240.9L512 196.7zM264 462h117v374H264V462z m189 0h117v374H453V462z m307 374H642V462h118v374z" p-id="3874"></path></svg>';
	var icon4 ='<svg   name="footsvg"   style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5881"><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM695.5 365.7l-210.6 292c-12.7 17.7-39 17.7-51.7 0L308.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H689c6.5 0 10.3 7.4 6.5 12.7z" p-id="5882"></path></svg>';
	var checkboxf ='<svg  name="svgck" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9458"><path d="M809.984 128q34.005333 0 59.989333 25.984t25.984 59.989333l0 596.010667q0 34.005333-25.984 59.989333t-59.989333 25.984l-596.010667 0q-34.005333 0-59.989333-25.984t-25.984-59.989333l0-596.010667q0-34.005333 25.984-59.989333t59.989333-25.984l596.010667 0zM809.984 214.016l-596.010667 0 0 596.010667 596.010667 0 0-596.010667z" p-id="9459"></path></svg>';
	var checkboxt ='<svg  name="svgck" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9557"><path d="M924 64H100c-19.9 0-36 16.1-36 36v824c0 19.9 16.1 36 36 36h824c19.9 0 36-16.1 36-36V100c0-19.9-16.1-36-36-36zM753.8 403.1L485.1 671.8c-7 7-16.2 10.5-25.5 10.5s-18.4-3.5-25.5-10.5l-164-164c-14.1-14.1-14.1-36.9 0-50.9 14.1-14.1 36.9-14.1 50.9 0l138.6 138.6 243.2-243.2c14.1-14.1 36.9-14.1 50.9 0 14.2 14 14.2 36.7 0.1 50.8z" p-id="9558"></path></svg>';			
	var pagediv = $('<div class="houzhuo_divfoot"><ul class="pagination"> <li><a href="javascript:;" style="border-right:0px;">首页</a></li><li><a href="javascript:;"  style="border-right:0px;">下一页</a></li><li><a href="javascript:;" style=""> '
			+'<input type="text" style="" value="1"> </a></li> <li><a href="javascript:;"  style="border-left:0px;">上一页</a></li>'
			+'<li><a href="javascript:;"  style="border-right:0px;border-left:0px;">尾页</a></li> <li><a href="javascript:;" style="padding:0px;"><select style="">'
			+'<option value=5>5</option><option value=10>10</option><option selected="selected" value=20>20</option><option value=40>40</option><option value=60>60</option><option value=80>80</option>'
			+'<option>100</option><option>200</option> </select></a></li> <li ><a href="javascript:;"  style="border-left:0px;">共100页</a></li></ul><ul class="pagination"><li><a>'+icon1+'</a></li><li><a style="border-left:0px;">'+icon2+'</a></li><li><a  style="border-left:0px;">'+icon3+'</a></li><li><a  style="border-left:0px;">'+icon4+'</a></li></ul></div>');
	var  orderup ='<svg   style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2838"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3c-3.8 5.3-0.1 12.7 6.5 12.7h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z" p-id="2839"></path></svg>';
	var  orderdown ='<svg style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2849"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z" p-id="2850"></path></svg>';
	var head ='<div style="float:left;line-height: 32px;"></div>'
		 	+'<div style="width:16px;float:left;margin-left:4px;">'
		 			+'<svg byl="desc" style="width: 12px; height: 12px;float:left;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6402"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z" p-id="6403"></path></svg> '	
		  			+'<svg byl="asc"  style="width: 12px; height: 12px;float:left;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6380"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z" p-id="6381"></path></svg>'
		  	+'</div>';

})(jQuery);